<template>
	<sy-navigation :homejb="'mine'" :scrollTopNum="scrollTopNum">
		<template #header2>
			<view class="header_title_mine">
				个人中心
			</view>
		</template>
		<view class="mine_view">
			<view class="user_msg" v-if="userInfo.id">
				<image :src="baseUrl+userInfo.avatar" class="tou_img"></image>
				<view class="phone">
					{{$calcPhone(userInfo.mobile)}}
				</view>
			</view>
			<view class="user_msg" v-if="!userInfo.id">
				<view class="phone" @click="toMineSet">
					请先登录
				</view>
				<view class="tou_img"></view>
			</view>
			<view class="card_box" @click=" nativeTo('orderAdmin')">
				<view class="pt_c1">
					<view class="c_left">
						<image src="../../static/mine/tb.png" class="tb_img"></image>
						<view class="tb_tit">
							填报/评估
						</view>
					</view>
					<image src="../../static/mine/mjb1.png" class="mjt1_img"></image>
				</view>
				<view class="zhiyuan_box">
					<view class="item_c">
						<view class="item_c_c">
							<view class="c_num">
								{{userInfo.evaluated_num || "--"}}
							</view>
							<view class="c_t">
								评估记录
							</view>
						</view>
						
					</view>
					<view class="item_c">
						<view class="item_c_c">
							<view class="c_num">
								{{userInfo.evaluated_num || "--"}}
							</view>
							<view class="c_t">
								志愿评估
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mine_list">
				<view class="m_item" v-for="item in mineList" @click="nativeTo(item.url)">
					<view class="m_left">
						<image :src="item.img" class="m1_img"></image>
						<view class="m_text">
							{{item.title}}
						</view>
					</view>
					<image src="../../static/mine/mjt2.png" class="mjt2_img"></image>
				</view>
			</view>
			<view class="quit_btn_box" v-if="userInfo.id">
				<view class="btn" @click="quit">
					退出登录
				</view>
			</view>
		</view>
		<uni-popup ref="loginPop" type="bottom">
			<sy-login @closePop="$refs.loginPop.close()"></sy-login>
		</uni-popup>
	</sy-navigation>
</template>

<script>
	export default {
		data() {
			return {
				scrollTopNum:0,
				mineList:[
					{img:"../../static/mine/m1.png",title:"个人资料",url:"mineSet"},
					{img:"../../static/mine/m2.png",title:"历史评估",url:"orderAdmin"},
					{img:"../../static/mine/m3.png",title:"问题咨询",url:"kefu"},
					{img:"../../static/mine/m4.png",title:"邀请有礼",url:"invite"}
				]
			};
		},
		onPageScroll(e) {
		    // e.scrollTop 表示当前页面滚动的距离
		    // console.log('页面滚动距离：', e.scrollTop);
			this.scrollTopNum = e.scrollTop;
			
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			},
			baseUrl(){
				return this.$store.state.baseUrl
			}
		},
		// 1.发送给朋友
		onShareAppMessage(res) {
			let path = ''
			if(uni.getStorageSync('shareId')){
				path = '/pages/home/home?shareId='+uni.getStorageSync('shareId')
			}else{
				path = '/pages/home/home'
			}
			return {
				title: '志愿填报',
				path,
				// imageUrl: this.share.imageUrl,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let path = ''
			if(uni.getStorageSync('shareId')){
				path = '/pages/home/home?shareId='+uni.getStorageSync('shareId')
			}else{
				path = '/pages/home/home'
			}
			return {
				title: '志愿填报',
				path,
				// imageUrl: this.share.imageUrl,
			}
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.$resetUserInfo()
			}
			
		},
		methods:{
			quit(){
				let this_ = this;
				uni.showModal({
					title: '提示',
					content: '是否确认退出登录?',
					success: function (res) {
						if (res.confirm) {
							this_.$queryApi("post","/user.user/logout", {}, res => {
								console.log(res,"logout")
								this_.$store.commit("logout")
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toMineSet(){
				if(this.userInfo.id){
					uni.navigateTo({
						url:"/pages/mine/mineSet"
					})
				}else{
					this.$refs.loginPop.open();
				}
				
			},
			nativeTo(url){ 
				if(this.userInfo.id){
					if(url == 'orderAdmin'){
						uni.navigateTo({
							url:"/pages/order/orderAdmin"
						})
					}else{
						uni.navigateTo({
							url:"/pages/mine/"+url
						})
					}
				}else{
					this.$refs.loginPop.open();
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
.quit_btn_box{
	padding: 180rpx 160rpx 100rpx;
	.btn{
		border-radius: 132rpx;
		border: 2rpx solid #3677F6;
		text-align: center;
		color: #3677F6;
		font-size: 36rpx;
		padding: 14rpx 0;
	}
}
.header_title_mine{
	color: #3D3D3D;
	font-size: 44rpx;
	font-weight: 700;
	left: 30rpx;
	position: absolute;
	top:50%;
	transform: translate(0,-50%);
}
.mine_view{
	color: #3D3D3D;
	.user_msg{
		display: flex;
		padding: 20rpx 30rpx;
		align-items: center;
		box-sizing: border-box;
		.tou_img{
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
		}
		.phone{
			font-weight: bold;
			font-size: 48rpx;
			margin-left:20rpx;
		}
	}
	.card_box{
		margin: 30rpx 30rpx 10rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(141,141,141,0.2);
		.pt_c1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			.tb_tit{
				font-size: 28rpx;
			}
			.c_left{
				display: inline-flex;
				align-items: center;
				.tb_img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 24rpx;
				}
			}
			.mjt1_img{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.zhiyuan_box{
			display: flex;
			padding: 0rpx 20rpx 26rpx;
			.item_c{
				flex:1;
				position: relative;
				&+.item_c::before{
					content: "";
					display: inline-block;
					width: 1rpx;
					height: 130rpx;
					background-color: #E0E3EB;
					margin-right: 8rpx;
					margin-left: 8rpx;
					position: absolute;
					top: 1rpx;
					left: -50rpx;
				}
				.item_c_c{
					display: inline-block;
					text-align: center;
					color: #333333 ;
					padding-left: 26rpx;
					.c_num{
						
						font-size: 72rpx;
					}
					.c_t{
						font-size: 36rpx;
					}
				}
			}
		}
	}
	.mine_list{
		padding: 20rpx 28rpx 0 32rpx;
		.m_item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f6f6f6;
			padding: 42rpx 0 40rpx;
			.m_left{
				display: inline-flex;
				align-items: center;
				.m1_img{
					width: 40rpx;
					height: 40rpx;
					margin-right: 24rpx;
				}
				.m_text{
					font-size: 32rpx;
				}
			}
			.mjt2_img{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}

</style>
